<template>
    <div style="min-width: 829px">
        <!-- 收入报表 -->
        <div v-if="$route.path == '/expenditure'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="年月">
                        <el-date-picker v-model="bill_time_start" type="month" placeholder="选择年月" value-format="yyyy-MM"> </el-date-picker>
                    </el-form-item>
                    <!-- 可选择全部  可选择单个日期 -->
                    <el-form-item label="日">
                        <el-date-picker v-model="bill_time_start1" type="date" placeholder="选择年月日" value-format="dd" format="dd"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button type="primary" @click="add">新增开支</el-button>
                    <el-button type="primary" @click="submit">批量提交</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary" @click="exportFn">导出 </el-button>
                </div>
                <!-- 多行合计 -->
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%" border ref="multipleTable">
                    <el-table-column type="selection" width="55" align="center" :selectable="selectable"> </el-table-column>
                    <el-table-column type="index" label="序号" align="center" width="70"></el-table-column>
                    <el-table-column prop="create_time" label="日期" align="center"></el-table-column>
                    <el-table-column prop="ex.title" label="开支明细" align="center"></el-table-column>
                    <el-table-column prop="money" label="全额" align="center"></el-table-column>
                    <el-table-column prop="remark" label="备注" align="center"></el-table-column>
                    <el-table-column label="状态" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.send_status == 0 ? '未提交' : '已提交' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="out_trade_no" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="setRow(scope.row)" v-if="!scope.row.send_status">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="divTable">
                    <div>当日合计：{{ day_sum }}</div>
                    <div>本月累计：{{ month_sum }}</div>
                </div>
            </div>
            <el-dialog title="" :visible.sync="dialogVisible" width="400px" destroy-on-close @close="formClose">
                <div slot="title">新增开支</div>
                <div>
                    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                        <el-form-item label="日期" prop="date">
                            <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="开支明细" prop="ex_id">
                            <el-select v-model="form.ex_id" placeholder="请选择开支明细" clearable>
                                <el-option v-for="item in shopList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="全额" prop="money">
                            <el-input v-model="form.money" placeholder="请输入金额" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" type="textarea" clearable placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div slot="footer">
                    <el-button @click="formClose">取 消</el-button>
                    <el-button type="primary" @click="formSure">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                day_sum: 0,
                month_sum: 0,
                shopList: [],
                loading: false,
                dialogVisible: false,
                bill_time_start: [],
                bill_time_start1: '',
                paging: {
                    page: 1,
                    total: 0,
                    limit: 10,
                    year: '',
                    month: '',
                    day: '',
                },
                form: {
                    date: '',
                    ex_id: '',
                    money: '',
                    remark: '',
                },
                rules: {
                    date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
                    ex_id: [{ required: true, message: '请选择开支明细', trigger: 'change' }],
                    money: [{ required: true, message: '请输入金额', trigger: 'blur' }],
                },
                tableData: [],
            };
        },
        created() {
            if (this.$route.path == '/expenditure') {
                this.getExpenditure();
                this.paging.year = this.$moment(new Date()).format('YYYY');
                this.paging.month = this.$moment(new Date()).format('MM');
                this.paging.day = this.$moment(new Date()).format('DD');
                this.bill_time_start = `${this.paging.year}-${this.paging.month}`;
                this.bill_time_start1 = this.paging.day;
                console.log(this.$moment(new Date()).format('YYYY'));
                this.handleCurrentChange(1);
            }
        },
        methods: {
            edit(row) {
                this.form.id = row.id;
                this.form.date = row.create_time?.slice(0, 10);
                this.form.ex_id = row.ex_id;
                this.form.money = row.money;
                this.form.remark = row.remark;
                this.dialogVisible = true;
            },
            // 导出
            async exportFn() {
                this.paging.year = this.bill_time_start.substring(0, 4);
                this.paging.month = this.bill_time_start.substring(5, 7);
                this.paging.day = this.bill_time_start1;
                let obj = Object.assign({}, this.paging);
                let url = this.utils.data.baseURL + 'store/finance/exportStoreEx';
                this.utils.urlToBlob(url, '开支列表', obj);
            },
            selectable(row, index) {
                if (row.send_status == 1) {
                    return false;
                } else {
                    return true;
                }
            },
            submit() {
                let data = this.$refs.multipleTable.selection;
                if (!data.length) {
                    this.$message.warning('请至少选择一个选项');
                    return false;
                }
                let ids = [];
                for (let item of data) {
                    ids.push(item.id);
                }
                this.$confirm('选中的选项将会被提交, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let { code, data } = await this.$Http.submitStoreEx({ ids: ids.join(',') });
                    if (code) {
                        this.$message.success('提交成功');
                        await this.handleCurrentChange();
                    }
                });
            },
            async formSure() {
                this.$refs['form'].validate(async (valid) => {
                    if (!valid) return;
                    let obj = Object.assign({}, this.form);
                    console.log(this.logistics);
                    let { code, data } = await this.$Http.setStoreEx(obj);
                    if (code) {
                        this.dialogVisible = false;
                        this.$message.success(obj.id ? '修改成功!' : '添加成功!');
                        this.handleCurrentChange();
                    }
                });
            },
            formClose() {
                this.dialogVisible = false;
                this.form.date = this.$moment(new Date()).format('YYYY-MM-DD');
                this.form.ex_id = '';
                this.form.money = '';
                this.form.remark = '';
            },
            async getExpenditure() {
                let { code, data } = await this.$Http.getExpenditure();
                this.loading = false;
                if (code) {
                    this.shopList = data;
                }
            },
            add() {
                this.form.date = this.$moment(new Date()).format('YYYY-MM-DD');
                this.dialogVisible = true;
            },
            async setRow(row) {
                this.$confirm('请注意，你确定要删除此开支吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let { code, data } = await this.$Http.delStoreEx({ id: row.id });
                    if (code) {
                        if (this.tableData.length == 1) {
                            this.paging.page -= 1;
                            this.paging.page = this.paging.page < 1 ? 1 : this.paging.page;
                        }
                        this.$message.success('删除成功');
                        await this.handleCurrentChange();
                    }
                });
            },
            async repairGetList() {
                this.paging.year = this.bill_time_start.substring(0, 4);
                this.paging.month = this.bill_time_start.substring(5, 7);
                this.paging.day = this.bill_time_start1;
                let obj = Object.assign({}, this.paging);
                this.loading = true;
                let { code, data } = await this.$Http.getStoreEx(obj);
                this.loading = false;
                if (code) {
                    this.tableData = data.data;
                    // this.paging.total = this.paging.total;
                    this.day_sum = data.day_sum;
                    this.month_sum = data.month_sum;
                }
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.repairGetList();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.repairGetList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .divTable {
        width: 100%;

        div {
            border-bottom: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
        }
    }

    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
        }
    }

    .image-thumbnail {
        width: 130px;
        height: 130px;
    }

    .divTableHead {
        width: 100%;

        div {
            border-top: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    }

    .divTable {
        width: 100%;

        div {
            border-bottom: 1px solid #ebeef5;
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
        }
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;

        td {
            border: 1px solid #ebeef5;
            text-align: center;
            height: 32px;
            color: #333333;
            padding: 0 5px;
            font-size: 14px;
        }
    }
</style>
